// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  // 初始化公共功能
  initCommonFeatures();
  
  // 根据当前页面初始化对应功能
  if (document.body.classList.contains('home-page')) {
    initHomePage();
  } else if (document.body.classList.contains('video-page')) {
    initVideoPage();
  } else if (document.body.classList.contains('article-page')) {
    initArticlePage();
  } else if (document.body.classList.contains('photo-page')) {
    initPhotoPage();
  }
});

// 公共功能初始化
function initCommonFeatures() {
  // 导航栏滚动效果
  const navbar = document.getElementById('navbar');
  if (navbar) {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 50) {
        navbar.classList.add('navbar-scrolled');
      } else {
        navbar.classList.remove('navbar-scrolled');
      }
    });
  }
  
  // 移动端菜单切换
  const menuToggle = document.querySelector('.menu-toggle');
  if (menuToggle) {
    menuToggle.addEventListener('click', function() {
      const mobileMenu = document.querySelector('.mobile-menu');
      if (mobileMenu) {
        mobileMenu.classList.toggle('hidden');
      }
    });
  }
}

// 主页功能初始化
function initHomePage() {
  // 内容标签切换
  const tabBtns = document.querySelectorAll('.tab-btn');
  const contentCards = document.querySelectorAll('.content-card');
  
  tabBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 移除所有标签的活跃状态
      tabBtns.forEach(b => b.classList.remove('active'));
      // 添加当前标签的活跃状态
      this.classList.add('active');
      
      const type = this.dataset.type;
      
      // 筛选内容
      contentCards.forEach(card => {
        if (type === 'all' || card.dataset.type === type) {
          card.style.display = 'block';
          setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
          }, 50);
        } else {
          card.style.opacity = '0';
          card.style.transform = 'translateY(10px)';
          setTimeout(() => {
            card.style.display = 'none';
          }, 300);
        }
      });
    });
  });
  
  // 筛选按钮切换
  const filterBtns = document.querySelectorAll('.filter-btn');
  filterBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      filterBtns.forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      // 实际项目中这里会有筛选逻辑
      simulateLoading();
    });
  });
  
  // 加载更多功能
  const loadMoreBtn = document.getElementById('load-more-btn');
  if (loadMoreBtn) {
    const spinner = loadMoreBtn.querySelector('.spinner');
    const contentGrid = document.querySelector('.content-grid');
    
    loadMoreBtn.addEventListener('click', function() {
      // 显示加载动画
      spinner.style.display = 'block';
      loadMoreBtn.disabled = true;
      
      // 模拟加载延迟
      setTimeout(() => {
        // 隐藏加载动画
        spinner.style.display = 'none';
        loadMoreBtn.disabled = false;
        
        // 克隆现有卡片作为新内容
        const cards = document.querySelectorAll('.content-card');
        if (cards.length > 0) {
          const randomIndex = Math.floor(Math.random() * cards.length);
          const clone = cards[randomIndex].cloneNode(true);
          
          // 重置克隆卡片的样式
          clone.style.opacity = '0';
          clone.style.transform = 'translateY(20px)';
          clone.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
          
          // 添加到网格
          contentGrid.appendChild(clone);
          
          // 触发动画
          setTimeout(() => {
            clone.style.opacity = '1';
            clone.style.transform = 'translateY(0)';
          }, 50);
        }
        
      }, 1500);
    });
  }
}

// 视频页功能初始化
function initVideoPage() {
  // 播放按钮点击事件
  const playIcon = document.querySelector('.play-icon');
  if (playIcon) {
    playIcon.addEventListener('click', function() {
      const playerContainer = document.querySelector('.player-container');
      if (playerContainer) {
        // 模拟视频播放
        this.style.display = 'none';
        const videoCover = document.querySelector('.video-cover');
        if (videoCover) videoCover.style.opacity = '0.5';
        
        // 实际项目中这里会嵌入真实视频播放器
        setTimeout(() => {
          alert('视频开始播放');
        }, 500);
      }
    });
  }
  
  // 视频操作按钮交互
  const actionBtns = document.querySelectorAll('.action-btn');
  actionBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      this.classList.toggle('active');
      if (this.classList.contains('active')) {
        this.style.backgroundColor = 'var(--primary)';
        this.style.color = 'white';
      } else {
        this.style.backgroundColor = 'var(--gray-light)';
        this.style.color = 'var(--gray-dark)';
      }
    });
  });
  
  // 关注按钮交互
  const followBtn = document.querySelector('.author-info .follow-btn');
  if (followBtn) {
    followBtn.addEventListener('click', function() {
      this.classList.toggle('followed');
      if (this.classList.contains('followed')) {
        this.innerHTML = '<i class="fa fa-check"></i> 已关注';
        this.style.backgroundColor = 'var(--gray-light)';
        this.style.color = 'var(--gray-dark)';
      } else {
        this.innerHTML = '<i class="fa fa-plus"></i> 关注';
        this.style.backgroundColor = 'var(--primary)';
        this.style.color = 'white';
      }
    });
  }
  
  // 评论提交
  const sendComment = document.querySelector('.send-comment');
  if (sendComment) {
    sendComment.addEventListener('click', function() {
      const commentInput = document.querySelector('.comment-input textarea');
      if (commentInput && commentInput.value.trim()) {
        alert('评论已提交: ' + commentInput.value.trim());
        commentInput.value = '';
      } else {
        alert('请输入评论内容');
      }
    });
  }
  
  // 加载更多评论
  const loadMoreComments = document.querySelector('.load-more-comments');
  if (loadMoreComments) {
    loadMoreComments.addEventListener('click', function() {
      this.textContent = '加载中...';
      
      setTimeout(() => {
        this.textContent = '加载更多评论';
        // 实际项目中这里会加载更多评论
      }, 1500);
    });
  }
}

// 文章页功能初始化
function initArticlePage() {
  // 文章点赞功能
  const likeBtn = document.querySelector('.like-btn');
  if (likeBtn) {
    likeBtn.addEventListener('click', function() {
      this.classList.toggle('active');
      const likeCount = this.querySelector('.like-count');
      if (likeCount) {
        let count = parseInt(likeCount.textContent);
        likeCount.textContent = this.classList.contains('active') ? count + 1 : count - 1;
      }
    });
  }
  
  // 文章收藏功能
  const collectBtn = document.querySelector('.collect-btn');
  if (collectBtn) {
    collectBtn.addEventListener('click', function() {
      this.classList.toggle('active');
    });
  }
}

// 图片页功能初始化
function initPhotoPage() {
  // 图片查看器功能
  const photos = document.querySelectorAll('.photo-item');
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  
  if (lightbox && lightboxImg) {
    // 打开图片查看器
    photos.forEach(photo => {
      photo.addEventListener('click', function() {
        const imgSrc = this.getAttribute('data-src');
        if (imgSrc) {
          lightboxImg.src = imgSrc;
          lightbox.classList.remove('hidden');
          document.body.style.overflow = 'hidden';
        }
      });
    });
    
    // 关闭图片查看器
    lightbox.addEventListener('click', function(e) {
      if (e.target === lightbox) {
        lightbox.classList.add('hidden');
        document.body.style.overflow = 'auto';
      }
    });
    
    // 图片查看器导航
    const prevBtn = document.querySelector('.lightbox-prev');
    const nextBtn = document.querySelector('.lightbox-next');
    let currentIndex = 0;
    
    if (prevBtn && nextBtn) {
      prevBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        currentIndex = (currentIndex - 1 + photos.length) % photos.length;
        lightboxImg.src = photos[currentIndex].getAttribute('data-src');
      });
      
      nextBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        currentIndex = (currentIndex + 1) % photos.length;
        lightboxImg.src = photos[currentIndex].getAttribute('data-src');
      });
    }
  }
}

// 工具函数：模拟加载状态
function simulateLoading() {
  const contentArea = document.querySelector('.content-grid');
  if (contentArea) {
    // 添加加载状态
    contentArea.style.opacity = '0.5';
    
    // 1秒后恢复
    setTimeout(() => {
      contentArea.style.opacity = '1';
    }, 800);
  }
}